<template>
<view class="fillInformation-content">
	<view class="fillInformation-header">
		<text class="fillInformation-header-title">门店信息</text>
		<view class="fillInformation-header-content">
			<text class="fillInformation-header-content-title">瑞鹏宠物医院（三林分院）</text>
			<text class="fillInformation-header-content-address">浦锦路309弄3号</text>
		</view>
	</view>
	
	<view class="fillInformation-header" v-show="isOnline">
		<text class="fillInformation-header-title">预约信息</text>
		<view class="fillInformation-header-content">
			<text class="fillInformation-header-content-title">12月13日 14:15</text>
			<text class="fillInformation-header-content-address">服务时长约60分钟</text>
		</view>
	</view>
	
	<view class="fillInformation-header" v-show="isOnline">
		<text class="fillInformation-header-title">服务</text>
		<view class="fillInformation-header-content">
			<text class="fillInformation-header-content-title">幼犬首次免疫套餐</text>
			<text class="fillInformation-header-content-address" style="font-size: 32rpx; color: #FF413C;">￥199</text>
		</view>
	</view>
	
	
	<view class="fillInformation-view">
		<text class="fillInformation-view-title">宠物补充信息</text>
		<view class="fillInformation-view-content">
			<picker
				mode="selector"
				:range="petsArr"
				:value="petsArrNumber"
				@change="bindPetsPickerChange"
				range-key="name"
			>
				<view v-if="petsArrNumber !=='导入宠物信息'" class="fillInformation-view-animation">
					<view class="fillInformation-view-animation-left">
						<image class="fillInformation-view-animation-img1" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`"  mode="aspectFill" />
						<text class="fillInformation-view-animation-text1">贝贝</text>
					</view>
					<view class="fillInformation-view-animation-right">
						<text class="fillInformation-view-animation-text2">已填写 8/9</text>
						<image class="fillInformation-view-animation-img2" :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
					</view>
					
				</view>
				<view v-else class="fillInformation-view-animation">
					<view class="fillInformation-view-animation-left">
						<text class="fillInformation-view-animation-left-noAnimation">导入宠物信息</text>
					</view>
					<view class="fillInformation-view-animation-right">
						<image class="fillInformation-view-animation-img2" :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
					</view>
				</view>
				
			</picker>
			
			<view class="fillInformation-list">
				<view class="fillInformation-listInfo">
					<text>是否绝育</text>
					<radio-group @change="radioChange" class="radio-group">
						<label class="radio-label" v-for="(item, index) in radioItems" :key="item.value">
							<view>
								<radio color="#FFD300" :value="item.value" :checked="index === radioNumber" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="fillInformation-listInfo">
					<text>性别</text>
					<view>
						<picker
							class="medical-tab0-animal-check"
							mode="selector" 
							:range="genderArr" 
							:value="genderArrNumber" 
							@change="bindGenderPickerChange"
							range-key="name"		
						 >
							<view class="picker-inner">
								<text class="unSelect" v-if="genderArrNumber === '请选择' " >
									请选择
								</text>
								<text class="selected" v-else>
									{{genderArr[genderArrNumber]["name"]}}
								</text>
								<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
							</view>
						 </picker>
					</view>
				</view>
				<view class="fillInformation-listInfo">
					<text>品种</text>
					<view>
						<input 
							:value="breed" 
							placeholder="请填写" 
							placeholder-class="placeholderClass"
						/>
					</view>
				</view>
				
				<view class="fillInformation-listInfo">
					<text>年龄</text>
					<view>
						<picker
							class="medical-tab0-animal-check"
							mode="selector" 
							:range="ageArr" 
							:value="ageArrNumber" 
							@change="bindAgePickerChange"
							range-key="name"		
						 >
							<view class="picker-inner">
								<text class="unSelect" v-if="ageArrNumber === '请选择' " >
									请选择
								</text>
								<text class="selected" v-else>
									{{ageArr[ageArrNumber]["name"]}}
								</text>
								<text>
								</text>
								<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`"  mode="aspectFill" />
							</view>
						 </picker>
					</view>
				</view>
				
				<view class="fillInformation-listInfo">
					<text>体重</text>
					<view>
						<input
							:value="weight" 
							placeholder="请填写" 
							placeholder-class="placeholderClass"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="fillInformation-view" style="margin-bottom: 200rpx;">
		<text class="fillInformation-view-title">预约人</text>
		<view class="fillInformation-view-content">
			<view class="fillInformation-list paddingTop0">
				<view class="fillInformation-listInfo">
					<text>姓名</text>
					<view>
						<input 
							:value="applyName" 
							placeholder="请填写"
							placeholder-class="placeholderClass"
						/>
					</view>
				</view>
			</view>
			
			<view class="fillInformation-list " style="padding-top: 32rpx;">
				<view class="fillInformation-listInfo">
					<text>电话</text>
					<view>
						<input 
							:value="applyTel" 
							placeholder="请填写"
							placeholder-class="placeholderClass"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="bottom-button-outer">
		<view class="bottom-button">
			确认
		</view>
	</view>
</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'
export default defineComponent({
	props: {
		isOnline: String
	},
	setup(props) {
		const { prefix_image }=config()
		const data = reactive({
			// 是否绝育
			radioItems: [
				{
					value: "0",
					name: "是"
				},
				{
					value: "1",
					name: "否"
				}
			],
			radioNumber: 0,
			
			// 性别picker数据
			genderArr: [
				{
					"name": "公",
					"namekey": 0,
					
				},
				{
					"name": "母",
					"namekey": 1,
					
				}
			],
			genderArrNumber: "请选择",
			
			// 品种
			breed: "博美",
					
			// 年龄picker数据
			ageArr: [
				{
					"name": "6岁",
					"namekey": 0,
				},
				{
					"name": "7岁",
					"namekey": 0,
				},
			],
			ageArrNumber: "请选择",
			
			// 体重
			weight: 12,
			
			// 预约人姓名
			applyName: "李先生",
			
			// 预约人电话
			applyTel: "135",
			
			// 导入宠物信息
			petsArr: [
				{
					"name": "贝贝",
					"namekey": 0
				},
				{
					"name": "欢迎",
					"namekey": 1
				}
			],
			petsArrNumber: "导入宠物信息",
			
			isOnline: props.isOnline=== "true" ? true : false
		})
		
		// 导入宠物信息
		const bindPetsPickerChange = (e) => {
			data.petsArrNumber = e.target.value
		}
		
		// 是否绝育
		const radioChange = (evt) => {
			console.log(data)
            for (let i = 0; i < data.radioItems.length; i++) {
                if (data.radioItems[i].value === evt.detail.value) {
                    data.radioNumber = i;
                    break;
                }
            }
        }
		
		// 选择年龄
		const bindAgePickerChange = (e) => {
			data.ageArrNumber = e.target.value
		}
		
		// 选择性别
		const bindGenderPickerChange = (e) =>  {
			data.genderArrNumber = e.target.value
		}
		return {
			...toRefs(data),
			radioChange,
			bindAgePickerChange,
			bindGenderPickerChange,
			bindPetsPickerChange,
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped>
.fillInformation-content{
	background: #F6F6F7;
	min-height: 100vh;
	overflow: hidden;
	.bottom-button-outer{
		display: flex;
		width: 100%;
		justify-content: center;
		z-index: 1;
		.bottom-button{
			width: 600rpx;
			height: 96rpx;
			background: #FFD300;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #111111;
			text-align: center;
			line-height: 96rpx;
			position: fixed;
			bottom: 68rpx;
		}
	}
	.fillInformation-header,.fillInformation-view{
		.fillInformation-header-title,.fillInformation-view-title{
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding-top: 40rpx;
			padding-left: 32rpx;
			padding-bottom: 24rpx;
			display: flex;
		}
		.fillInformation-header-content,.fillInformation-view-content{
			// height: 157rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			
			padding: 36rpx 32rpx 32rpx 32rpx;
			box-sizing: border-box;
			width: 100vw;
			.fillInformation-view-animation{
				width: 686rpx;
				height: 108rpx;
				background: #F7F7F7;
				border-radius: 16rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.05);
				
				align-items: center;
				display: flex;
				padding: 0rpx 24rpx;
				justify-content: space-between;
				box-sizing: border-box;
				.fillInformation-view-animation-left{
					display: flex;
					align-items: center;
					.fillInformation-view-animation-img1{
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
					}
					.fillInformation-view-animation-text1{
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						margin-left: 18rpx;
					}
					.fillInformation-view-animation-left-noAnimation{
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}
				}
				.fillInformation-view-animation-right{
					display: flex;
					align-items: center;
					.fillInformation-view-animation-text2{
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #B2B2B2;
						margin-right: 12rpx;
					}
					.fillInformation-view-animation-img2{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
			.fillInformation-header-content-title{
				font-size: 32rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				
				padding-bottom: 10rpx;
			}
			.fillInformation-header-content-address{
				font-size: 24rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.fillInformation-list{
				display: flex;
				flex-direction:column;
				padding-top: 48rpx;
				.fillInformation-listInfo{
					display: flex;
					justify-content: space-between;
					padding-bottom: 64rpx;
					.radio-label{
						display: flex;
						margin-left: 54rpx;
					}
					.radio-group{
						display: flex;
					}
					.placeholderClass{
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.picker-inner{
						display: flex;
						align-items: center;
						text,.selected{
							font-size: 32rpx;
							// font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.unSelect{
							font-size: 32rpx;
							// font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
					input{
						text-align: right;
						font-size: 32rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					image{
						width: 44rpx;
						height: 44rpx;
						margin-left: 4rpx;
					}
				}
			}
			
		}
		.paddingTop0{
			padding-top: 0rpx !important;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
			padding-bottom: 32rpx;
		}
		.fillInformation-listInfo:last-of-type{
			padding-bottom: 0rpx !important;
		}
	}
}
</style>
